<template>
    <div>
        <div id="main1" style="width: 600px; height: 400px;"></div>
        <div id="main2" style="width: 600px; height: 400px;"></div>
        <div id="main3" style="width: 600px; height: 400px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue'
import { getAmountByLastWeek } from '@/api/api'


var myChart1 = null;
var myChart2 = null;
var myChart3 = null;

// 动态获取数据
const updateData = () => {
    console.log('动态获取数据');
    
}

const loadEchart = () => {
    // 获取动态数据
    getAmountByLastWeek().then(res => {
        if(res.data.code == 200) {
            let names = res.data.data.names;
            let data = res.data.data.list;
            let pie = res.data.data.pie;

            // 绘制图表1
            myChart1.setOption({
                title: {
                    text: '最近7天销售额'
                },
                tooltip: {},
                xAxis: {
                    data: names
                },
                yAxis: {},
                series: [
                    {
                    name: '销售额',
                    type: 'bar',
                    data: data
                    }
                ]
            });

            // 绘制图表2
            myChart2.setOption({
                title: {
                    text: '最近7天销售额'
                },
                tooltip: {},
                xAxis: {
                    data: names
                },
                yAxis: {},
                series: [
                    {
                    name: '销售额',
                    type: 'line',
                    data: data
                    }
                ]
            });

            // 绘制图表3
            let option = {
                title: {
                    text: '最近7天的销售额',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: '销售额',
                    type: 'pie',
                    radius: '50%',
                    data: pie,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
                };
            myChart3.setOption(option);
        }
    })
}

// 页面加载生命周期函数
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    myChart1 = echarts.init(document.getElementById('main1'));
    myChart2 = echarts.init(document.getElementById('main2'));
    myChart3 = echarts.init(document.getElementById('main3'));

    // 显示echarts图表
    loadEchart();

});
</script>

<style scoped>

</style>